/* 全局样式 */
/* 因为很多标签默认设置内外边距 */
*{margin: 0px; padding: 0px;}
/* 默认是以基线对齐，会有不平 */
img{vertical-align: bottom;}
/* 默认a有下划 */
a{text-decoration: none;}
/* 列表标 li 默认样式不占像素空间，会影响其它元素*/
li{list-style: none;}

body,html{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #999;
}

/* 容器 */
.register-content{
	width: 565px;
	height: 500px;
	/* border: 1px solid #000; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/* logo样式 */
.logo{
	width: 226px;
}

/* 注册表样式 */
.register-table{
	border-spacing: 10px 20px;
}
.register-table tr td{
	position: relative;
}

.register-table tr td:nth-of-type(1){
	/* height: 50px; */
	color: white;
	font-weight: 600;
	font-size: 14px;
}
.register-table tr td:first-of-type{
	width: 86px;
}
[type="text"],[type="password"]{
	width: 300px;
	height: 50px;
	outline: none;
	background: #CBCBCB;
	border: none;
	padding-left: 20px;
	color: white;
	font-size: 16px;
}
[type="text"]::placeholder,[type="password"]::placeholder{
	color: white;
	font-weight: 600;
	font-size: 12px;
}

/* 用户名提示 */
.username{
	border: 1px solid transparent;
}

.username-msg, .code-msg, .password-msg, .confirm-msg{
	font-size: 12px;
	color: red;
	position: absolute;
	left: 0px;
	top: 52px;
	display: none;
}

/* 验证码 */
.code-content{
	display: flex;
	align-items: center;
}
.code{
	width: 210px;
	/* border: 1px solid transparent; */
}
.code-txt{
	width: 64px;
	height: 26px;
	border: 1px solid #000;
	margin: 0px 10px 0px 24px;
	background: url(../img/code_bg.jpg);
	display: flex;
	justify-content: space-evenly;
}
.code-btn{
	font-size: 12px;
	color: white;
}
.code-btn:hover{
	text-decoration: underline;
}

/* 密码 */
.password-content{
	display: flex;
	align-items: center;
}
.password{
	margin-right: 10px;
}
.pwd-strength{
	width: 124px;
	height: 10px;
	border: 1px solid #888;
	display: flex;
	background-color: white;
}
.pwd-strength span{
	flex: 1;
	background-color: white;
	position: relative;
	display: flex;
	justify-content: center;
}
.pwd-strength span:after{
	content: '弱';
	position: absolute;
	top: 12px;
	font-size: 12px;
	color: #333;
}

.pwd-strength span:nth-of-type(1){
	background-color: #fff;
}

.pwd-strength span:nth-of-type(2){
	background-color: #fff;
}
.pwd-strength span:nth-of-type(2):after{
	content:'中';
}
.pwd-strength span:nth-of-type(3){
	background-color: #fff;
}
.pwd-strength span:nth-of-type(3):after{
	content:'强';
}
/* 同意协议 */
.register-table tr:nth-of-type(5) td a{
	font-size: 14px;
	color: #000;
}
.register-table tr:nth-of-type(5) td a:hover{
	border-bottom: 1px solid #000;
}

/* 注册按钮 */
.register-btn{
	width: 320px;
	text-align: center;
	line-height: 50px;
	background: #333;
	color: white;
	font-weight: bold;
	cursor: pointer;
}

/* 登录及更多登录方式 */
.register-table tr:last-of-type td{
	position: relative;
}
.other-login img{
	width: 24px;
	height: 22px;
	margin-right: 10px;
}
.other-login img:last-of-type{
	width: 24px;
	height: 22px;
	margin-right: 120px;
}
.login{
	font-size: 14px;
	color: #000;
}
.login:hover{
	border-bottom: 1px solid #000;
}
